<script setup lang="ts">
import { ref } from "vue";
import router from "@/router";
import { useMultiTagsStoreHook } from "@/store/modules/multiTags";
import { useRoute } from "vue-router";
import { allocationTypeList } from "@/utils/staticData";

const multiTagsStore = useMultiTagsStoreHook();
const route = useRoute();

let form = ref({
  allocationType: null,
  originWarehouseName: "",
  targetWarehouseName: "",
  allocationCode: "",
  applicantName: ""
});

const goBack = () => {
  multiTagsStore.handleTags("splice", route.path);
  router.back();
};

defineExpose({
  getForm: () => form.value,
  setForm: (data: any) => {
    form.value = data;
  }
});
</script>

<template>
  <div class="applyForm">
    <div class="flex items-center justify-between flex-row pb-[16px]">
      <p class="text-[16px] font-bold">调拨管理信息</p>
      <el-button @click="goBack"
        ><svg-icon name="rollback" size="16" />&nbsp;返回</el-button
      >
    </div>
    <el-descriptions class="mb-[-12px]">
      <el-descriptions-item label="调拨类型：">
        {{
          allocationTypeList.find(item => item.value === form.allocationType)
            ?.label
        }}
      </el-descriptions-item>
      <el-descriptions-item label="调出仓库：">
        {{ form.originWarehouseName }}
      </el-descriptions-item>
      <el-descriptions-item label="调入仓库：">
        {{ form.targetWarehouseName }}
      </el-descriptions-item>
      <el-descriptions-item label="调拨单编号：">
        {{ form.allocationCode }}
      </el-descriptions-item>
      <el-descriptions-item label="调拨申请人：">
        {{ form.applicantName }}
      </el-descriptions-item>
    </el-descriptions>
  </div>
</template>

<style scoped lang="scss">
.applyForm {
  overflow: hidden;
}
:deep(.el-descriptions__label) {
  margin-right: 0;
}
</style>
